import React, { Component } from 'react';
import { Modal, Form, Input, Select } from 'antd';
import styles from './EditMat.css';
import * as matService from '../../services/matService';
import * as selectSrcService from '../../services/selectSrcService';
import get from '../../utils/request';

const FormItem = Form.Item;
const { Option } = Select;
class EditMat extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      record: {
        id: '',
        name: '',
        packingScale: '',
        specName: '',
        specId: '',
        categoryName: '',
        categoryId: '',
        traceId: ''
      },
      selectSrc: {
        MaterialSpecs: [],
        Categorys: []
      }
    };
  }

  showModelHandler = (e) => {
    if (e) e.stopPropagation();
    this.setState({
      visible: true,
      selectSrc: { Categorys: selectSrcService.Categorys, MaterialSpecs: selectSrcService.MaterialSpecs }
    });
    this.loadItem();
  };
  ///加载实体
  loadItem = () => {
    if (this.props.record != null)
      matService.getItem(this.props.record.id).then((d) => {
        this.setState({
          record: d.result
        })
      });
  };

  hideModelHandler = () => {
    this.setState({
      visible: false,
    });
  };

  okHandler = () => {
    const { onOk } = this.props;
    this.props.form.validateFields((err, values) => {
      if (!err) {
        onOk(values);
        this.hideModelHandler();
      }
    });
  };

  render() {
    const { children } = this.props;
    const { getFieldDecorator } = this.props.form;
    const { selectSrc } = this.state;
    const { id, name, code, packingScale, specId, categoryId, traceId, usefulLife } = this.state.record;
    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
    };
    return (
      <span>
        <span onClick={this.showModelHandler}>
          {children}
        </span>
        <Modal
          title="编辑物料"
          visible={this.state.visible}
          onOk={this.okHandler}
          onCancel={this.hideModelHandler}
          maskClosable={false}
        >
          <Form onSubmit={this.okHandler}>
            <FormItem
              {...formItemLayout}
              label="编号"
            >
              {
                getFieldDecorator('id', {
                  initialValue: id,
                })(<Input />)
              }
            </FormItem>
            <FormItem
              {...formItemLayout}
              label="名称"
            >
              {
                getFieldDecorator('name', {
                  initialValue: name,
                })(<Input />)
              }
            </FormItem>
            <FormItem
              {...formItemLayout}
              label="分类"
            >
              {
                getFieldDecorator('categoryId', {
                  initialValue: categoryId,
                })(<Select placeholder="请选择物料分类">
                  {
                    selectSrc.Categorys.map(v => <Option key={v.id} value={v.id}>{v.name}</Option>)
                  }
                </Select>)
              }
            </FormItem>
            <FormItem
              {...formItemLayout}
              label="规格"
            >
              {
                getFieldDecorator('specId', {
                  initialValue: specId,
                })(<Select placeholder="请选择物料规格">
                  {
                    selectSrc.MaterialSpecs.map(v => <Option key={v.id} value={v.id}>{v.name}</Option>)
                  }
                </Select>)
              }
            </FormItem>
            <FormItem
              {...formItemLayout}
              label="关联比例"
            >
              {
                getFieldDecorator('packingScale', {
                  initialValue: packingScale,
                })(<Input />)
              }
            </FormItem>
            <FormItem
              {...formItemLayout}
              label="追溯标识"
            >
              {
                getFieldDecorator('traceId', {
                  initialValue: traceId,
                })(<Input />)
              }
            </FormItem>
            <FormItem
              {...formItemLayout}
              label="保质期(月)"
            >
              {
                getFieldDecorator('usefulLife', {
                  initialValue: usefulLife,
                })(<Input />)
              }
            </FormItem>
          </Form>
        </Modal>
      </span>
    );
  }
}

export default Form.create()(EditMat);
